import { mapStore } from "@/stores/counter";
import { onMounted } from "vue";
import { rainyYear } from "@/models/getRainyHttp";
import { sunHttp } from "@/models/getSunHttp";
export const echart = () => {
    const store = mapStore()
    onMounted(async () => {
        // 降雨数据
        for (let i = 2000; i < 2021; i++) {
            const res = await rainyYear(i)
            const lines = res.split('\n')
            const arr = lines.slice(1).map(item => {
                const value = item.split(',')
                if (value[2] === '昆明市') {
                    return {
                        data: parseInt(value[4])
                    }
                } else {
                    return null
                }
            }).filter(item => item != null)
            store.kunming_rainy.push(arr)
        }

        // 日照数据
        for (let i = 2000; i < 2021; i++) {
            const res = await sunHttp(i)
            const lines = res.split('\n')
            const arr = lines.slice(1).map(item => {
                const value = item.split(',')
                if (value[2] === '昆明市') {
                    return {
                        data: parseInt(value[4])
                    }
                } else {
                    return null
                }
            }).filter(item => item != null)
            store.kunming_sun.push(arr)
        }

    })

    const echart_kunming = () => {
        store.issunItem = false
        store.istempItem = false
        store.israinyItem = false
        store.ispmItem = false
        store.isExtra = !store.isExtra
        store.isEchart = !store.isEchart
        // 降水情况
        store.option_rainy = {
            // tootip: {},
            title: {
                text: '昆明市近20年降水',
                left: 'center',
                top: '2%',
                textStyle: {
                    color: '#fff',
                },
            },
            tooltip: {
                formatter: function (params) {
                    const res = params
                    return `<strong>年份: ${res.name}<br/> 降雨量: ${res.data}</strong> `
                }
            },
            xAxis: {
                type: 'category',
                data: store.availableYears,
                axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff'
                },
                min: 600
            },
            series: [
                {
                    data: store.kunming_rainy.map(item => item[0].data),
                    type: 'line',
                    lineStyle: {
                        width: 3
                    },
                }
            ]
        };

        // 气温情况
        store.option_temp = {
            title: {
                text: '昆明市近20年平均气温',
                left: 'center',
                top: '-1%',
                textStyle: {
                    color: '#fff',
                },
            },
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    radius: '70%',
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 40,
                    splitNumber: 8,
                    itemStyle: {
                        color: '#FF9800'
                    },
                    progress: {
                        show: true,
                        width: 30
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 30
                        }
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        distance: -52,
                        length: 14,
                        lineStyle: {
                            width: 3,
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        distance: -10,
                        color: '#fff',
                        fontSize: 14
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 30,
                        fontWeight: 'bolder',
                        formatter: '{value} °C',
                        color: '#4CAF50'
                    },
                    data: [
                        {
                            value: store.avg_temp
                        }
                    ]
                },
            ]
        };

        // 站点情况
        store.site_option = {
            title: {
                text: '近年监控站点数量排行',
                left: 'center',
                top: '10%',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    color: '#fff'
                },
            },
            yAxis: {
                type: 'category',
                data: store.site_more.map(item => item.city),
                axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '站点数量',
                    type: 'bar',
                    data: store.site_more.map(item => ({
                        value: item.count,
                        itemStyle: {
                            color: (() => {
                                if (item.count >= 15 && item.count < 20) {
                                    return '#2f4554'; // 设置第一个区间的颜色
                                } else if (item.count >= 20 && item.count < 25) {
                                    return '#61a0a8'; // 设置第二个区间的颜色
                                } else if (item.count >= 25 && item.count < 30) {
                                    return '#d48265'; // 设置第三个区间的颜色
                                } else {
                                    return '#c23531'; // 其他条件的默认颜色
                                }
                            })()
                        },
                        label: {
                            show: true,
                            position: 'insideRight', // 可以根据需要调整位置
                            formatter: '{c}' // 显示柱形图的值
                        }
                    })),

                },
            ]
        };

        // 日照情况
        store.option_sun = {
            // tootip: {},
            title: {
                text: '昆明市近20年光照',
                left: 'center',
                top: "7%",
                textStyle: {
                    color: '#fff',
                    fontfamily: "monospace"
                },
            },
            tooltip: {
                formatter: function (params) {
                    const res = params
                    return `<strong>年份: ${res.name}<br/> 光照强度: ${res.data}</strong> `
                }
            },
            xAxis: {
                type: 'category',
                data: store.availableYears,
                axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff'
                },
                min: 1800
            },
            series: [
                {
                    data: store.kunming_sun.map(item => item[0].data),
                    type: 'line',
                    lineStyle: {
                        width: 3,
                        color: 'orange'
                    },
                    itemStyle: {
                        color: "#ff2d51"
                    }
                }
            ]
        };
    }


    return {
        echart_kunming,
    }
}